import React from 'react';
import './App.css';
import 'antd/dist/antd.css';
import model from './model';
import { withRouter } from 'react-router';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Layout, Menu, Icon } from 'antd';
import Counter from './componment/Counter';
import { Index, Dbs} from './componment/Dbc'
import ColorPanle from './componment/Color';
import { Provider } from 'react-redux'
import store from './store'
import G2048 from './componment/G2048'

const { Header, Sider, Content } = Layout;
/**展示路由信息，将路由信息映射到props属性 */
const LocationDisplay = withRouter(({ location }) => {
    // console.dir(location)
  return <div data-testid="location-display">
    <code>{location.pathname}</code>
  </div>
  }
)

/** 使用antd作为布局的工具 */
class Flayout extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      collapsed: false,
    }
  }

  componentDidMount() {
    console.dir(this.props)
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const menus = model.mainManu
    const routes = [
      { path: '/', component: Index },
      { path: '/db/', component: Dbs },
      { path: '/language/', component: Index },
      { path: '/color/', component: ColorPanle },
      { path: '/counter/', component: Counter },
      { path: '/g2048/', component: G2048 },
    ]
    return (
      <Router>
        <Layout>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                style={{ float: 'right' }}
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
            </Header>
            <Content
              style={{
                margin: '24px 16px',
                padding: 24,
                background: '#DDD',
                minHeight: 280,
              }}
            >
              <LocationDisplay />
              {routes.map((item, i) => <Route exact={i===0} path={item.path} key={i}  component={item.component} />)}
          </Content>
          </Layout>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              {
                menus.map((val, i) => {
                  return (
                    <Menu.Item key={i}>
                      <Icon type={val.icon} /><span><Link to={val.path}>{val.name}</Link></span>
                    </Menu.Item>
                  )
                })
              }
            </Menu>
          </Sider>
        </Layout>
      </Router>
    );
  }
}

const App =(props)=> {
  return (
    <Provider store={store}>
      <Flayout />
    </Provider>
  );
}

export default App;
